.Banner {
  display: grid;
  padding: var(--base-size-8);
  /* stylelint-disable-next-line primer/colors */
  background-color: var(--banner-bgColor);
  /* stylelint-disable-next-line primer/colors */
  border: var(--borderWidth-thin) solid var(--banner-borderColor);
  border-radius: var(--borderRadius-medium);
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;

  &[data-actions-layout='default'] {
    @supports (container-type: inline-size) {
      container: banner / inline-size;
    }
  }

  &[data-actions-layout='stacked'] {
    & .BannerContainer {
      flex-direction: column;
    }

    & .BannerActions :where([data-primary-action='trailing']) {
      display: none;
    }

    & .BannerActions :where([data-primary-action='leading']) {
      display: flex;
    }
  }

  &[data-actions-layout='inline'] {
    & .BannerContainer {
      flex-wrap: nowrap;
    }

    & .BannerActions {
      flex: 0 0 auto;
    }

    & .BannerActions :where([data-primary-action='trailing']) {
      display: flex;
    }

    & .BannerActions :where([data-primary-action='leading']) {
      display: none;
    }
  }

  &[data-layout='compact'] {
    padding: var(--base-size-4);
  }

  &[data-flush] {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }

  &[data-variant='critical'] {
    --banner-bgColor: var(--bgColor-danger-muted);
    --banner-borderColor: var(--borderColor-danger-muted);
    --banner-icon-fgColor: var(--fgColor-danger);
  }

  &[data-variant='info'] {
    --banner-bgColor: var(--bgColor-accent-muted);
    --banner-borderColor: var(--borderColor-accent-muted);
    --banner-icon-fgColor: var(--fgColor-accent);
  }

  &[data-variant='success'] {
    --banner-bgColor: var(--bgColor-success-muted);
    --banner-borderColor: var(--borderColor-success-muted);
    --banner-icon-fgColor: var(--fgColor-success);
  }

  &[data-variant='upsell'] {
    --banner-bgColor: var(--bgColor-upsell-muted);
    --banner-borderColor: var(--borderColor-upsell-muted);
    --banner-icon-fgColor: var(--fgColor-upsell);
  }

  &[data-variant='warning'] {
    --banner-bgColor: var(--bgColor-attention-muted);
    --banner-borderColor: var(--borderColor-attention-muted);
    --banner-icon-fgColor: var(--fgColor-attention);
  }
}

/* BannerContainer -------------------------------------------------------- */

.BannerContainer {
  font-size: var(--text-body-size-medium);
  align-items: start;
  line-height: var(--text-body-lineHeight-medium);
  row-gap: var(--base-size-4);
  column-gap: var(--base-size-4);
}

.Banner :where(.BannerContainer) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline']) .BannerContainer {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
}

/* BannerContent ---------------------------------------------------------- */

.BannerContent {
  display: grid;
  row-gap: var(--base-size-4);
  grid-column-start: 1;
  margin-block: var(--base-size-8);
}

.Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerContent {
  margin-block: var(--base-size-6);
}

@media screen and (min-width: 544px) {
  .BannerContent {
    flex: 1 1 0%;
  }
}

.BannerTitle {
  margin: 0;
  font-size: inherit;
  font-weight: var(--base-text-weight-semibold);
}

/* BannerIcon ------------------------------------------------------------- */

.BannerIcon {
  display: grid;
  place-items: center;
  padding: var(--base-size-8);
}

.BannerIcon svg {
  /* 20px is the line box height of the trailing action buttons */
  height: var(--base-size-20);
  /* stylelint-disable-next-line primer/colors */
  color: var(--banner-icon-fgColor);
  /* stylelint-disable-next-line primer/colors */
  fill: var(--banner-icon-fgColor);
}

/* stylelint-disable-next-line selector-max-specificity */
.Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerIcon svg {
  height: var(--base-size-16);
}

/* BannerDismiss ---------------------------------------------------------- */

.BannerDismiss {
  display: grid;
  place-items: center;
  padding: var(--base-size-8);
  margin-inline-start: var(--base-size-4);
}

:where(.Banner):has(.BannerActions) .BannerDismiss {
  margin-block: var(--base-size-2);
}

.BannerDismiss svg {
  /* stylelint-disable-next-line primer/colors */
  color: var(--banner-icon-fgColor);
}

/* BannerActions ---------------------------------------------------------- */

.BannerActionsContainer {
  display: flex;
  column-gap: var(--base-size-12);
  align-items: center;
  margin-block: var(--base-size-2);
}

.BannerActions :where([data-primary-action='trailing']) {
  display: none;
}

.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline']) .BannerActions {
  margin-block-end: var(--base-size-6);
}

/* stylelint-disable-next-line selector-max-specificity */
.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline'])
  .BannerActionsContainer[data-primary-action='trailing'] {
  display: none;
}

/* stylelint-disable-next-line selector-max-specificity */
.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline'])
  .BannerActionsContainer[data-primary-action='leading'] {
  display: flex;
}

/* Layout ------------------------------------------------------------------- */

@container banner (max-width: 500px) {
  .BannerContainer {
    display: grid;
  }

  .BannerContainer:has(.BannerActionsContainer) {
    grid-template-rows: auto auto;
  }

  .BannerActions {
    margin-block-end: var(--base-size-6);
  }

  .BannerActions [data-primary-action='trailing'] {
    display: none;
  }

  .BannerActions [data-primary-action='leading'] {
    display: flex;
  }
}

@container banner (min-width: 500px) {
  .BannerContainer {
    display: grid;
    grid-template-columns: auto auto;
  }

  :where(.Banner):not([data-dismissible])
    :where(.BannerActionsContainer[data-primary-action='trailing'])
    :where([data-variant='link']:only-child) {
    padding-inline: 0 var(--base-size-12);
  }

  .BannerActions [data-primary-action='trailing'] {
    display: flex;
    min-height: var(--base-size-32, 2rem);
  }

  .BannerActions [data-primary-action='leading'] {
    display: none;
  }
}
